.table-responsive {
    overflow-x: auto; /* Enable horizontal scrolling on small screens */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
  }
  
  th {
    background-color: #17549A;
  }
  
  
  @media (max-width: 768px) {
    th, td {
      display: block; /* Stack cells on small screens */
      width: 100%;
    }
  
    th {
      position: absolute; /* Position the headers above the cells */
      left: -9999px; /* Hide headers */
    }
  
    td {
      text-align: right;
      position: relative;
      padding-left: 50%; /* Add space for pseudo element */
    }
  
    td::before {
      content: attr(data-label); /* Use data-label for header */
      position: absolute;
      left: 0;
      width: 50%;
      padding-left: 10px; /* Padding for the label */
      text-align: left;
      font-weight: bold;
    }
  }